import * as API from '@/services';
import { DEFAULT_FORM_LAYOUT, KfBizQuickFormProps, KfFloatingContextProps, KfInput, KfInputNumber, KfQuickForm, KfSwitch, KfTextArea } from 'kf-web-library';
import { Col, Form, Row } from 'antd';
import React, { FunctionComponent } from 'react';
import * as numeral from 'numeral';

const FormItem = Form.Item;
type QueryEntity = API.JournalSubscribePlan;
type CreateEntity = API.JournalSubscribePlan_Create;
type ModifyEntity = API.JournalSubscribePlan_Modify;

type DataFormProps = {
  journalId?: API.EntityId;
} & KfBizQuickFormProps &
  KfFloatingContextProps;

/**
 * 订阅计划 表单
 */
const QuickForm: FunctionComponent<DataFormProps> = (props) => {
  const { formType,journalId, bizId, ...rest } = props;

  return (
    <KfQuickForm
      formType={formType}
      formProps={{
        labelCol: {
          flex: '0 0 100px',
        },
        wrapperCol: {
          flex: '1',
        },
        initialValues: {
          enable: true,
        },
      }}
      defaultQueryRequest={() =>
        API.queryJournalSubscribePlan(bizId!).then((resp) => {
          if (resp.flag) {
            resp.data = {
              ...resp.data,
              totalPrice: (resp.data?.totalPrice || 0) / 100,
            } as any;
          }
          return new Promise((resolve) => resolve(resp));
        })
      }
      submitRequest={{
        create: (formValues) => API.createJournalSubscribePlan({
          ...formValues,
          totalPrice: (formValues.totalPrice || 0) * 100,
          originalPrice: (formValues.totalPrice || 0) * 100,
          journalId,
        } as CreateEntity),
        modify: (formValues) => API.modifyJournalSubscribePlan({
          ...formValues,
          totalPrice: (formValues.totalPrice || 0) * 100,
          originalPrice: (formValues.totalPrice || 0) * 100,
          id: bizId
        } as ModifyEntity),
      }}
      {...rest}
    >
      <Row>
        <Col span={12}>
          <FormItem name={nameof<ModifyEntity>((x) => x.enable)} label="是否启用" rules={[{ required: true }]}>
            <KfSwitch checkedChildren={'启用'} unCheckedChildren={'停用'} />
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem name={nameof<ModifyEntity>((x) => x.seq)} label="排序号" rules={[{ required: true }]}>
            <KfInputNumber />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <FormItem name={nameof<ModifyEntity>((x) => x.planName)} label="套餐名称" rules={[{ required: true }]}>
            <KfInput />
          </FormItem>
        </Col>
        <Col span={12}>
          <FormItem name={nameof<ModifyEntity>((x) => x.planCode)} label="套餐代码" rules={[{ required: true }]}>
            <KfInput />
          </FormItem>
        </Col>
      </Row>

      <FormItem name={nameof<ModifyEntity>((x) => x.issueCount)} label="包含期数" rules={[{ required: true }]}>
        <KfInputNumber />
      </FormItem>

      <FormItem noStyle={true} shouldUpdate={true}>
        {(form) => {
          const issueCount = form.getFieldValue(nameof<ModifyEntity>((x) => x.issueCount));
          const totalPrice = form.getFieldValue(nameof<ModifyEntity>((x) => x.totalPrice));
          let priceHelp: React.ReactNode | undefined = undefined;
          if (issueCount > 0 && totalPrice > 0) {
            priceHelp = <>单期价格：￥{numeral(totalPrice / issueCount).format('0.00')}</>;
          }

          return (
            <FormItem name={nameof<ModifyEntity>((x) => x.totalPrice)} label="定价" rules={[{ required: true }]} help={priceHelp}>
              <KfInputNumber prefix={'￥'} />
            </FormItem>
          );
        }}
      </FormItem>

      <FormItem name={nameof<ModifyEntity>((x) => x.description)} label="描述说明" rules={[{ required: false }]}>
        <KfTextArea />
      </FormItem>
    </KfQuickForm>
  );
};

export default QuickForm;
